<!--左侧响应式菜单-->
<template>
<div class="container">
    <div  :class="tabStyle == 'container_header1' ? 'title_box_logo1' : 'title_box_logo'" @dblclick = "closeCollapse">
        <span class="icon_box" style="width: 30px;z-index:10;"><img :src="leftImg" :width="letfWidth" height="32"/></span>
        <span v-if="!collapseState"  style="padding-left:15px;font-size: 20px;font-weight: bold; box-sizing: border-box;color: #fff;background-color:#060F20;"   slot="title">
            文丰PMS
        </span>
    </div>
   <el-aside style="margin-top: -77px;"  :class="tabStyle == 'container_header1' ? 'new-el-aside1 ' : 'new-el-aside'">
        <div class="sideleft" >
          <el-scrollbar class="default-scrollbar" wrapClass="default-scrollbar__wrap" viewClass="default-scrollbar__view" :native="false" wrapStyle viewStyle tag="section">
            <el-menu :default-active="$route.fullPath" @close="handleClose1" :collapse="collapseState" unique-opened router text-color="#fff" active-text-color="#C9D4ED">
              <el-menu-item  class="logoDiv">
              </el-menu-item>
              <el-menu-item  index='home' style="height: 30px;line-height: 30px;" :class="collapseState?'one-menu':'one-menu1'">
                <div class="title_box">
                  <span class="icon_box" style="width: 16px;">
                    <i class="iconfont icon-shouyelogo-01" style="width: 16px;color:#49AC4C;" ></i>
                  </span>
                  <span style="padding-left:10px;box-sizing: border-box;color: #A5B2D1;" v-if="!collapseState" @click="routeChanges({url:'/home',menuName:'首页'})" slot="title">首页</span>
                </div>
              </el-menu-item>

              <el-submenu   :index="item.id+''" v-for="(item,index) in menuData" :key="item.id" :class="collapseState?'one-menu':'one-menu1'">
                <template slot="title" class="title_box">
                  <span class="icon_box" :class="{ active_i:curTagsIndex == index}">
                    <el-tooltip class="item"  effect="light" :content="item.menuName" placement="top-start" :disabled="!collapseState">
                        <i :class="'iconfont font-g '+item.icon" :style="{color:item.color}"></i>
                     </el-tooltip>
                  </span>
                  <span class="hovercolor"  style="padding-left:15px;box-sizing: border-box;color: #A5B2D1;" @click="activeClick(index)" slot="title" v-if="!collapseState">{{item.menuName}}</span>
                </template>
                <div v-for="(itemDiv,index) in item.children" >
                  <!-- 二级目录 -->
                  <el-submenu :index="itemDiv.id+''" v-if="itemDiv.menuType == '01'">
                    <template slot="title">
                      <span :style="collapseState?'padding-left:25px':'padding-left:45px'" @click="activeClick(index)" slot="title">{{itemDiv.menuName}}</span>
                    </template>
                    <!-- 三级菜单 -->
                    <el-menu-item v-for="cItem in itemDiv.children" :index="'/'+cItem.url" :key="cItem.id" @click="routeChanges(cItem)"  class="subItembackground">
                      <template slot="title">
                        <span :style="collapseState?'padding-left:45px':'padding-left:65px'"  :class="collapseState?'one-menu':'one-menu1'">{{cItem.menuName}}</span>
                      </template>
                    </el-menu-item>
                  </el-submenu>
                  <!-- 二级菜单 -->
                  <el-menu-item  v-if="itemDiv.menuType != '01'" :index="'/'+itemDiv.url" :key="itemDiv.id" @click="routeChanges(itemDiv)"  class="subItembackground">
                    <template slot="title">
                      <span style="padding-left:45px;box-sizing: border-box;">{{itemDiv.menuName}}</span>
                    </template>
                  </el-menu-item>
                </div>
              </el-submenu>
            </el-menu>
          </el-scrollbar>
        </div>
      </el-aside> 
</div>
</template>

<script>
import { baseURL } from '@/network/http'
export default {
  name: 'settings',
  props: {
    menuData: {
      type: Array
    },
    routeChange: {
      type: Function
    },
    handleClose: {
      type: Function
    },
    handleCollapse: {
      type: Function
    },
    collapseState: {
      type: Boolean
    },
    tabStyle: {
      type: String
    }

  },
  data() {
    return {
      leftImg: require('../../../assets/img/logo.png'), // 左上角图标,根据pre pro切换
      letfWidth: '30', // 左上角图标宽度 根据pre pro切换
      userName: window.sessionStorage.getItem('userName'),
      colorLineFlag: true,
      curTagsIndex: '-1'
      // modalFlag: false,

    }
  },
  watch: {
    tabStyle(newval) {
      // alert(newval)
      // if()
    }
  },
  mounted() {
    this.leftImg = baseURL !== 'http://api-pre.portzj.com' ? require('../../../assets/img/logo.png') : require('../../../assets/svg/LOGO.svg')
    this.letfWidth = baseURL !== 'http://api.portzj.com' ? '35' : '30'
  },
  created() {

    // console.log(this.menuData);
  },
  methods: {
    closeCollapse() {
      // alert(111);
      this.handleCollapse();
    },
    handleClose1(key, keyPath) {
      this.handleClose(key);
    },
    activeClick(curIndex) {
      this.curTagsIndex = curIndex
      this.colorLineFlag = false
    },
    routeChanges(item) {
      this.routeChange(item)
    }

  }
}
</script>
<style>
.el-menu--collapse .el-menu .el-submenu, .el-menu--popup{
  background: #060F20!important;
  opacity: 0.9;
  border-radius: 4px!important;
  max-height: 600px;
}
/* ::-webkit-scrollbar {
display: none;
} */
</style>
<style lang="less" scoped>
.subItembackground{
  //  background-color:#060F20!important;
   background-color: rgba(6,15,32);
   color: #ffffff;
}
.subItembackground:hover{
   background-color:#000!important;
   color:#C9D4ED!important;
}
.title_box {
  display: block;
}
.one-menu1{
  text-align:left;
}
.one-menu{
  text-align:center;
}

.el-menu--collapse>.el-menu-item span, .el-menu--collapse>.el-submenu>.el-submenu__title span {
    height: 16px;
    width: 16px;
    overflow: hidden;
    visibility: visible;
    display: inline-table;
}
.container{
  background-color:#060F20;
  width: auto;
  padding: 0;
  margin: 0;
}
.logoDiv{
  height: 50px!important;
  line-height: 50px!important;
  border-bottom: 1px solid #000;

}
.icon_box{
  margin-left:10px;
}
.icon_box_sub{
  margin-left:30px;
}
.el-aside {

    /* overflow: hidden !important; */
    max-width: 208px;
    height:  calc(100vh) !important;
}
.new-el-aside1{
    //   width: auto !important;
}
.new-el-aside{
      width: auto !important;
}
.el-aside::-webkit-scrollbar{width:0px!important;}
.el-aside::-webkit-scrollbar-track{background-color:#bee1eb;}
.el-aside::-webkit-scrollbar-thumb{background-color:#00aff0;}
.el-aside::-webkit-scrollbar-thumb:hover {background-color:#9c3}
.el-aside::-webkit-scrollbar-thumb:active {background-color:#00aff0}

/deep/ .el-menu--collapse {
  width: 60px;
  box-sizing: border-box;
}
/deep/ .el-menu--collapse .el-menu .el-submenu, .el-menu--popup{
   width:100px!important;
}
/deep/ .el-menu--collapse .el-menu .el-submenu, .el-menu--popup li {
  //width:100px!important;
  height: 35px;
  line-height: 35px;
  padding: 0px!important;
}
.sideleft::-webkit-scrollbar {
  display: none;
}

.sideleft {
  overflow-y: auto;
  position: relative;
  padding-bottom: 10px;
  .el-submenu .el-menu-item.is-active{
    background-color: #4228D6 !important;
  }
  /deep/ .el-menu {
    background: #060F20;
    height: 100%;
    border-right: none;
  }

  /deep/ .el-submenu__title,
  .el-menu-item {
    color: #d1d5de;
    height: 40px;
    line-height: 40px;
    position: relative;
    transition: all 0s;
  }
  //设置菜单hover不显示背景颜色
  .el-menu-item:focus, .el-menu-item:hover{
    outline: 0;
    background-color: #000;
  }
  /deep/ .el-submenu__title:hover {
    color: #fff;
    background-color: #000 !important;
  }
}
.title_box_logo{
    width: 60px;
    height: 50px;
    display: flex;
    align-items: center;
    z-index: 66;
    background: #060F20;
    position: fixed  ;
    top: 0;
    left: 0;
}
.title_box_logo1{
    width: 208px;
    height: 50px;
    display: flex;
    align-items: center;
    z-index: 66;
    background: #060F20;
    position: fixed  ;
    top: 0;
    left: 0;
}

</style>
